import React, { useEffect } from 'react'
import * as echarts from 'echarts';
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart, LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
export default function homePage() {
  const user = JSON.parse(localStorage.user)
  const role = JSON.parse(localStorage.roles)
  useEffect(() => {
    var chartDom = document.getElementById('ech');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['您', '总数']
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '近七日系统访问量',
          min: 0,
          max: 200,
          interval: 40,
        },
      ],
      series: [
        {
          name: '您',
          type: 'bar',
          data: [
            2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3
          ]
        },
        {
          name: '总数',
          type: 'bar',
          data: [
            12, 15, 19, 36, 48, 90, 170, 182, 48, 38, 16, 12
          ]
        },
      ]
    };

    option && myChart.setOption(option);
  }, [])
  return (
    <div>
      <div className='top'>
        <div className='topContent'>
          <div style={{ display: 'flex' }}>
            <div>
              <img src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + user.avatar} style={{ width: 80, height: 80 }} />
            </div>
            <div style={{ marginLeft: 10 }}>
              <div style={{ fontSize: 18 }}>你好，{user.username}，今天的bug改完了吗</div>
              <div style={{ marginTop: 5, marginBottom: 5 }} className='c45'>{user.deptName} | {role[0]}</div>
              <div className='c45'>上次登录时间：{user.lastLoginTime}</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ marginRight: 30 }}>
              <div className='c45'>今日IP</div>
              <div style={{ color: 'blue' }}>1</div>
            </div>
            <div style={{ marginRight: 30 }}>
              <div className='c45'>今日访问</div>
              <div style={{ color: 'blue' }}>780</div>
            </div>
            <div>
              <div className='c45'>总访问量</div>
              <div style={{ color: 'blue' }}>3286</div>
            </div>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', marginTop: 20 }}>
        <div className='commonBorder' style={{ width: '50%' ,textAlign:'center'}}>
          <div id='ech' style={{width:'80%',height:500,marginLeft:50}}></div>
        </div>
        <div className='commonBorder' style={{ flex: 1, marginLeft: 20,height:400}}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems:'center',padding: 20 ,height:'15%'}}>
            <span style={{ fontSize: 18 }}>进行中的项目</span>
            <a style={{ fontSize: 18, color: '#1890ff' }} href='https://gitee.com/godza/redrabbitsecond' target="_blank">所有项目</a>
          </div>
          <table style={{ width: '100%',height:'85%'}}>
            <tbody>
              <tr>
                <td className='commonBorder' style={{ width: '50%', padding: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div className='projectLogo'>F</div>
                    <div style={{ paddingTop: 10, paddingLeft: 10 }}>
                      <div>RedRabbit-Shiro</div>
                      <div className='c45'><p>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</p></div>
                    </div>
                  </div>
                </td>
                <td className='commonBorder' style={{ width: '50%', padding: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div className='projectLogo'>F</div>
                    <div style={{ paddingTop: 10, paddingLeft: 10 }}>
                      <div>RedRabbit-Shiro</div>
                      <div className='c45'><p>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</p></div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td className='commonBorder' style={{ width: '50%', padding: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div className='projectLogo'>F</div>
                    <div style={{ paddingTop: 10, paddingLeft: 10 }}>
                      <div>RedRabbit-Shiro</div>
                      <div className='c45'><p>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</p></div>
                    </div>
                  </div>
                </td>
                <td className='commonBorder' style={{ width: '50%', padding: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div className='projectLogo'>F</div>
                    <div style={{ paddingTop: 10, paddingLeft: 10 }}>
                      <div>RedRabbit-Shiro</div>
                      <div className='c45'><p>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</p></div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td className='commonBorder' style={{ width: '50%', padding: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div className='projectLogo'>F</div>
                    <div style={{ paddingTop: 10, paddingLeft: 10 }}>
                      <div>RedRabbit-Shiro</div>
                      <div className='c45'><p>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</p></div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
